<template>
  <div id="bottomRight1">

   
         <div class="">
      
      <div>
        <div id="bottomRightChart1" style="width:100%;height:300px;"></div>
      </div>
    </div>
 
   
   
  </div>
</template>

<script>
import echartMixins from "@/utils/resizeMixins";

export default {
  data() {
    return {
      chart: null
    };
  },
  mounted() {
    this.draw();
    this.charTimg();
  },
  mixins: [echartMixins],
  methods: {
    charTimg() {
      setInterval(() => {
        this.draw();
      }, 6000);
    },
    draw() {
      // 基于准备好的dom，初始化echarts实例
      let t = this;
      this.chart = this.$echarts.init(document.getElementById("bottomRightChart1"));
      //  ----------------------------------------------------------------
       let Data = ['15日', '16日', '17日', '18日', '19日', '20日', '21日', '22日', '23日', '24日' ];
        
       
 
      let Data1 = [ 620, 532, 601, 934, 790, 1030, 1120,232, 601, 944];
      let Data2 = [620, 532, 601, 934, 790, 1030, 1120,232, 601, 944];
       
     let w = document.documentElement.clientWidth / 100;
     let w1 = document.documentElement.clientWidth / 120;
      let option= {
        title: {
          text: "晚高峰互补前后水口出力功率",
          x: "center",
          y: 5,
          textStyle: {
            color: "#B4B4B4",
            fontSize: w,
            fontWeight: "normal"
          }
        },
         grid: {
          left: 45,
          right:15,
          top: "10%"
        },

        xAxis: {
          type: 'category',
          
          
          axisLine: {
            lineStyle: {
              color: "#B4B4B4"
            }
          },
          data: Data
        },
        legend: {
          data: ['互补前水口晚峰出力', '互补后水口晚峰出力'],
          bottom:'5%',
          textStyle: {
            color: "#fff",
            fontSize: w1
          }
        },
        yAxis: [
          {
            splitLine: { show: false },

            axisLine: {
              lineStyle: {
                color: "#B4B4B4"
              }
            }
          }
        ],
        series: [
          {
            name: '互补前水口晚峰出力',
            type: 'bar',
           
            itemStyle: {
               color: new t.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(32,248,255,50)'},
              
              { offset: 1, color: 'rgba(32,248,255,0)' }
              ])
            },
            data: Data1
          },
          {
            name: '互补后水口晚峰出力',
            type: 'bar',
        
            
            itemStyle: {
              color: new t.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(18,135,255,50)' },
              
                { offset: 1, color: 'rgba(18,135,255,0)' }
              ])
            },
            data: Data2
          }
        ]
};

     
      

      this.chart.setOption(option);
    }
  },
  destroyed() {
    window.onresize = null;
  }
};
</script>

<style lang="scss">
#bottomRight1 {
  padding: 5px;
  margin-bottom: 5px;
  height: 300px;
  min-width: 3.75rem;
  border-radius: 0.0625rem;
  .bg-color-black {
    padding: 0.2rem;
    height: 30vh;
    border-radius: 0.125rem;
  }
  .text {
    color: #c3cbde;
  } //下滑线动态
  .decoration2 {
    position: absolute;
    right: 0.125rem;
  }
  .chart-box {
    margin-top: 0.2rem;
    width: 2.125rem;
    height: 2.125rem;
    .active-ring-name {
      padding-top: 0.125rem;
    }
  }
}
</style>